<template>
    <h2>UiUpload 文件上传</h2>
    <p>文件采用分割上传，需要后端拼接</p>
    <p>组件支持：大文件上传、断网续传、网页关闭，再次打开续传</p>
    <h4>基础用法</h4>
    <div class="component_item">
        <div class="p_20">
            <span>张三的资料：</span><UiUpload id="no001" :option="option" @uploadSuccess="successBack" @uploadFail="uploadFail"/>
            <span>李四的资料：</span><UiUpload id="no002" :option="option" @uploadSuccess="successBack" @uploadFail="uploadFail"/>
        </div>
        <pre class="code top_no_radius" v-pre>
    &lt;div>
        &lt;span>张三的资料：&lt;/span>
        &lt;UiUpload 
            id="no001" 
            :option="option" 
            @uploadSuccess="successBack('no001')" 
            @uploadFail="uploadFail('no001')"
        />
        &lt;span>李四的资料：&lt;/span>
        &lt;UiUpload 
            id="no002" 
            :option="option" 
            @uploadSuccess="successBack('no002')" 
            @uploadFail="uploadFail('no002')"
        />
    &lt;/div>
    &lt;script setup>
        import { ref } from 'vue';
        import { UiUpload } from 'yong-ui'
        // 上传的配置参数
        const option = ref({
            headers: {
                token: '123456789'
            },
            body: {
                name: '死鬼'
            },
            url: 'api/upload', // 必须要有上传地址
        })

        // 上传成功
        const successBack = (id) => {
            console.log("上传成功", id);
        }
        // 上传失败
        const uploadFail = (id) => {
            console.log("上传失败", id);
        }
    &lt;/script>
        </pre>
    </div>
    <h4 class="mt40">属性</h4>
    <table width="100%" class="yong_ui_table" cellspacing="0" cellpadding="0" border="0">
        <tr class="yong_ui_table_head">
            <td>参数</td>
            <td>说明</td>
            <td>类型</td>
            <td>可选值</td>
            <td>默认值</td>
        </tr>
        <tr>
            <td>id</td>
            <td>必选参数，且唯一</td>
            <td>String</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>option</td>
            <td>上传时的参数</td>
            <td>Object</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </table>
    <h4 class="mt40">option属性</h4>
    <table width="100%" class="yong_ui_table" cellspacing="0" cellpadding="0" border="0">
        <tr class="yong_ui_table_head">
            <td>参数</td>
            <td>说明</td>
            <td>类型</td>
            <td>可选值</td>
            <td>默认值</td>
        </tr>
        <tr>
            <td>url</td>
            <td>必选参数，上传文件地址</td>
            <td>String</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>headers</td>
            <td>上传时会带入到请求的header参数</td>
            <td>Object</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>body</td>
            <td>上传时会带入到请求的formData参数</td>
            <td>Object</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </table>
    <h4 class="mt40">formData默认携带参数</h4>
    <table width="100%" class="yong_ui_table" cellspacing="0" cellpadding="0" border="0">
        <tr class="yong_ui_table_head">
            <td>参数</td>
            <td>说明</td>
            <td>类型</td>
        </tr>
        <tr>
            <td>id</td>
            <td>属性id，用户传入的id</td>
            <td>String</td>
        </tr>
        <tr>
            <td>file</td>
            <td>切片的文件</td>
            <td>File</td>
        </tr>
        <tr>
            <td>chunkIndex</td>
            <td>当前切片的顺序</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>totalChunks</td>
            <td>切片总数</td>
            <td>Number</td>
        </tr>
        <tr>
            <td>fileName</td>
            <td>文件名称</td>
            <td>String</td>
        </tr>
    </table>
    <h4 class="mt40">@事件</h4>
    <table width="100%" class="yong_ui_table" cellspacing="0" cellpadding="0" border="0">
        <tr class="yong_ui_table_head">
            <td>方法名</td>
            <td>说明</td>
            <td>参数</td>
        </tr>
        <tr>
            <td>uploadSuccess</td>
            <td>文件上传成功</td>
            <td>-</td>
        </tr>
        <tr>
            <td>uploadFail</td>
            <td>文件上传失败</td>
            <td>-</td>
        </tr>
    </table>
</template>
<script setup>
import { ref } from 'vue';
import { UiUpload } from '../components'

const option = ref({
    headers: {
        token: '123456789'
    },
    body: {
        name: '死鬼'
    },
    url: 'api/upload', // 必须要有上传地址
})

// 上传成功
const successBack = () => {
    console.log("上传成功");
}
// 上传失败
const uploadFail = () => {
    console.log("上传失败");
}

</script>
<style lang="css" scoped>

</style>